<template>
  <div class="app-container" style="background: #f5f7f9">
    <el-row :gutter="10">
      <el-col :span="18">
        <el-row :gutter="10">
          <el-card>
            <div slot="header" class="headerTitle">待办事项</div>
            <div style="height: 193px">
              <div class="pending_data_items" @click="allAudit">
                <div class="titles">
                  全部待审核企业
                  <img
                    src="@/assets/common/右箭头灰.png"
                    alt=""
                    class="rtIcon"
                  />
                </div>
                <di v class="num">{{ todoList.companyCount }}</di>
              </div>
              <div class="pending_data_items" @click="waitAudit">
                <div class="titles">
                  待审核职位
                  <img
                    src="@/assets/common/右箭头灰.png"
                    alt=""
                    class="rtIcon"
                  />
                </div>
                <div class="num">{{ todoList.jobCount }}</div>
              </div>
              <div class="pending_data_items" @click="waitAuditResume">
                <div class="titles">
                  待审核简历
                  <img
                    src="@/assets/common/右箭头灰.png"
                    alt=""
                    class="rtIcon"
                  />
                </div>
                <div class="num">{{ todoList.resumeCount }}</div>
              </div>
              <div class="pending_data_items" @click="opinion">
                <div class="titles">
                  意见建议
                  <img
                    src="@/assets/common/右箭头灰.png"
                    alt=""
                    class="rtIcon"
                  />
                </div>
                <div class="num">{{ todoList.proposalCount }}</div>
              </div>
            </div>
          </el-card>
        </el-row>
        <el-row :gutter="10" style="margin-top: 20px; margin-bottom: 20px">
          <el-card>
            <div slot="header" class="headerTitle">快捷菜单</div>
            <div class="shortcutMenu">
              <div class="shortcutMenuItem" @click="allAudit">
                <img src="@/assets/common/我的客户.png" alt="" class="icon" />
                <span class="text">企业信息</span>
              </div>
              <div class="shortcutMenuItem" @click="positionManage">
                <img src="@/assets/common/职位管理.png" alt="" class="icon" />
                <span class="text">职位管理</span>
              </div>
              <div class="shortcutMenuItem" @click="allResume">
                <img src="@/assets/common/简历管理.png" alt="" class="icon" />
                <span class="text">简历管理</span>
              </div>
              <!-- <div class="shortcutMenuItem" @click="setMenuConfig">
                <img src="@/assets/common/套餐管理.png" alt="" class="icon" />
                <span class="text">套餐管理</span>
              </div>
              <div class="shortcutMenuItem" @click="officialAccount">
                <img src="@/assets/common/公众号营销.png" alt="" class="icon" />
                <span class="text">公众号营销</span>
              </div> -->
              <!-- <div class="shortcutMenuItem" @click="adManage">
                <img src="@/assets/common/广告管理.png" alt="" class="icon" />
                <span class="text">广告管理</span>
              </div> -->
              <div class="shortcutMenuItem" @click="systemSetting">
                <img src="@/assets/common/系统设置.png" alt="" class="icon" />
                <span class="text">系统设置</span>
              </div>
            </div>
          </el-card>
        </el-row>
        <el-card>
          <div slot="header">
            <span class="headerTitle">实时数据</span>
            <div class="refresh">
              <!-- <span class="refreshBtnTime">更新时间：2024-11-20 10:14:40</span> -->
              <!-- <span class="refreshBtn">刷新</span> -->
            </div>
          </div>
          <div style="padding-top: 20px">
            <el-row :gutter="10">
              <el-col :span="5" style="padding-left: 10px; padding-right: 10px">
                <div class="today-info" @click="enterpriseMemberClick">
                  <div class="tit1">新增个人会员</div>
                  <div class="num">{{ middleList.todayAddPersonal }}</div>
                  <div class="tit2">
                    昨日：{{ middleList.yesterdayAddPersonal }}
                  </div>
                </div>
              </el-col>
              <el-col :span="5" style="padding-left: 10px; padding-right: 10px">
                <div class="today-info" @click="waitAuditResume">
                  <div class="tit1">新增简历</div>
                  <div class="num">{{ middleList.todayAddResume }}</div>
                  <div class="tit2">
                    昨日：{{ middleList.yesterdayAddResume }}
                  </div>
                </div>
              </el-col>
              <el-col :span="5" style="padding-left: 10px; padding-right: 10px">
                <div class="today-info" @click="waitAuditResume">
                  <div class="tit1">简历刷新数</div>
                  <div class="num">{{ middleList.todayRefResume }}</div>
                  <div class="tit2">
                    昨日：{{ middleList.yesterdayRefResume }}
                  </div>
                </div>
              </el-col>
              <el-col :span="5" style="padding-left: 10px; padding-right: 10px">
                <div class="today-info" @click="resumeRecordClick">
                  <div class="tit1">投递数</div>
                  <div class="num">{{ middleList.todayDelivery }}</div>
                  <div class="tit2">
                    昨日：{{ middleList.yesterdayDelivery }}
                  </div>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left: 10px; padding-right: 10px">
                <div class="today-info" @click="enterpriseMemberClick">
                  <div class="tit1">个人完成订单</div>
                  <div class="num">0</div>
                  <div class="tit2">昨日：1</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10"></el-row>
          </div>
          <div style="padding-top: 20px">
            <el-row :gutter="10">
              <el-col :span="5" style="padding-left: 10px; padding-right: 10px">
                <div class="today-info" @click="addmemberManage">
                  <div class="tit1">新增企业会员</div>
                  <div class="num">{{ middleList.todayAddCompany }}</div>
                  <div class="tit2">
                    昨日：{{ middleList.yesterdayAddCompany }}
                  </div>
                </div>
              </el-col>
              <el-col :span="5" style="padding-left: 10px; padding-right: 10px">
                <div class="today-info" @click="waitAudit">
                  <div class="tit1">新增职位</div>
                  <div class="num">{{ middleList.todayAddJob }}</div>
                  <div class="tit2">昨日：{{ middleList.yesterdayAddJob }}</div>
                </div>
              </el-col>
              <el-col :span="5" style="padding-left: 10px; padding-right: 10px">
                <div class="today-info" @click="waitAudit">
                  <div class="tit1">职位刷新数</div>
                  <div class="num">{{ middleList.todayRefJob }}</div>
                  <div class="tit2">昨日：{{ middleList.yesterdayAddJob }}</div>
                </div>
              </el-col>
              <el-col :span="5" style="padding-left: 10px; padding-right: 10px">
                <div class="today-info" @click="resumeDownloadClick">
                  <div class="tit1">下载数</div>
                  <div class="num">{{ middleList.todayDownload }}</div>
                  <div class="tit2">
                    昨日：{{ middleList.yesterdayDownload }}
                  </div>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left: 10px; padding-right: 10px">
                <div class="today-info" @click="addmemberManage">
                  <div class="tit1">企业完成订单</div>
                  <div class="num">0</div>
                  <div class="tit2">昨日：1</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10"></el-row>
          </div>
        </el-card>
        <div class="dashboard-container">
          <!-- 趋势类型选择标签 -->
          <el-tabs v-model="activeTab">
            <el-tab-pane label="注册趋势" name="register">
              <!-- 图表区域 -->
              <div class="chart-container" ref="chartContainer"></div>
            </el-tab-pane>
            <el-tab-pane label="个人活跃度" name="personal">
              <personal_activity :personalList="personalList" />
            </el-tab-pane>
            <el-tab-pane label="企业活跃度" name="enterprise">
              <qyLiveness :enterpriseList="enterpriseList" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
        <div class="topBox">
          <img src="@/assets/common/MEMBER.png" alt="" class="icon" />
          <div style="display: flex">
            <div class="topBox1">企业会员数：</div>
            <div class="topBox2">
              <span style="color: #232323; font-weight: 700">{{
                topList.companyMemberCount
              }}</span>
            </div>
          </div>
          <div style="display: flex">
            <div class="topBox1">职位数：</div>
            <span style="color: #232323; font-weight: 700">{{
              topList.jobCount
            }}</span>
          </div>
          <div style="display: flex">
            <div class="topBox1">公司数：</div>
            <span style="color: #232323; font-weight: 700">{{
              topList.companyCount
            }}</span>
          </div>
          <div style="height: 100px"></div>
          <div class="topBox3">
            <span style="color: #55585c">本月新增会员</span>
            <span style="color: #414549">{{ topList.companyRegCount }}</span>
          </div>
        </div>
      </el-col>
      <el-col
        :span="6"
        style="padding-left: 10px; padding-right: 10px; margin-top: 10px"
      >
        <div class="topBox">
          <img src="@/assets/common/MEMBER.png" alt="" class="icon" />
          <div style="display: flex">
            <div class="topBox1">个人会员数：</div>
            <div class="topBox2">
              <span style="color: #232323; font-weight: 700">{{
                topList.personalMemberCount
              }}</span>
            </div>
          </div>
          <div style="display: flex">
            <div class="topBox1">简历数：</div>
            <div class="topBox2">
              <span style="color: #232323; font-weight: 700">{{
                topList.resumeCount
              }}</span>
            </div>
          </div>
          <div style="display: flex">
            <div class="topBox1">个人数：</div>
            <div class="topBox2">
              <span style="color: #232323; font-weight: 700">{{
                topList.personalCount
              }}</span>
            </div>
          </div>
          <div style="height: 100px"></div>
          <div class="topBox3">
            <span style="color: #55585c">本月新增会员</span>
            <span style="color: #414549">{{ topList.personalRegCount }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  selHomeDataWaitApi,
  selHomeDataTopApi,
  selHomeDataMiddleApi,
  selHomeDataAddApi,
  selHomeDataPersonalApi,
  selHomeDataCompanyApi,
} from "@/api/homePage";
import personal_activity from "@/views/manageCenter/components/personal_activity";
import qyLiveness from "@/views/manageCenter/components/qyLiveness";
export default {
  components: {
    personal_activity,
    qyLiveness,
  },
  data() {
    return {
      activeTab: "register",
      timeRange: "7",
      dateRange: [new Date("2024-11-13"), new Date("2024-11-20")],
      chart: null,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      selHomeDataTopList: [],
      topList: {},
      middleList: {},
      todoList: {},
      regTrend: [],
      hireList: [],
      personalLoading: true,
      personalList: [],
      enterpriseList: [],
    };
  },
  created() {
    this.selHomeDataTop();
    this.selHomeDataMiddle();
    this.selHomeDataWait();
    this.selHomeDataAdd();
    // 个人活跃度
    // this.selHomeDataPersonal();
  },
  mounted() {
    this.initChart();
  },
  methods: {
    // 企业管理
    allAudit() {
      this.$router.push({
        name: "companyUser",
        query: {
          audit: 0,
        },
      });
    },
    // 职位管理
    waitAudit() {
      this.$router.push({
        name: "positionManage",
        query: {
          audit: 0,
        },
      });
    },
    // 全部简历
    waitAuditResume() {
      this.$router.push({
        name: "allResume",
        query: {
          audit: 0,
        },
      });
    },
    // 意见建议
    opinion() {
      this.$router.push({
        name: "opinion",
      });
    },
    // 系统设置
    systemSetting() {
      this.$router.push({
        name: "manage",
      });
    },
    // 投递简历记录
    resumeRecordClick() {
      this.$router.push({
        name: "resumeRecord",
      });
    },
    // 企业会员
    addmemberManage() {
      this.$router.push({
        name: "enterpriseMember",
      });
    },
    // 企业会员
    enterpriseMemberClick() {
      this.$router.push({
        name: "personMember",
      });
    },
    // 简历下载
    resumeDownloadClick() {
      this.$router.push({
        name: "resumeDownload",
      });
    },
    // 工作台--top
    async selHomeDataTop() {
      const res = await selHomeDataTopApi();
      this.topList = res.data;
    },
    // 工作台--实时数据
    async selHomeDataMiddle() {
      const res = await selHomeDataMiddleApi();
      this.middleList = res.data;
    },
    // 工作台-待办事项
    async selHomeDataWait() {
      const res = await selHomeDataWaitApi();
      this.todoList = res.data;
    },
    // 工作台-注册趋势
    async selHomeDataAdd() {
      const res = await selHomeDataAddApi();
      // this.regTrend = res.data[0].map((item) => {
      // });
      this.regTrend = res.data;
      if (res.data && res.data[0]) {
        // 直接使用全局过滤器处理时间戳数组并倒序
        this.hireList = res.data[0]
          .map((timestamp) => this.$options.filters.formatDate(timestamp))
          .reverse();
      }
      console.log(this.hireList);
      console.log(this.regTrend);
      // 更新图表
      this.$nextTick(() => {
        this.updateChart();
      });
      // console.log(this.regTrend[0] | dateFormat);
    },
    // 工作台-个人活跃度
    async selHomeDataPersonal() {
      try {
        this.personalLoading = true;
        const res = await selHomeDataPersonalApi();
        if (res.code === 1) {
          this.personalList = res.data;
        }
      } catch (error) {
        console.error("获取个人活跃度数据失败:", error);
      } finally {
        this.personalLoading = false;
      }
    },
    // 工作台-企业活跃度
    async selHomeDataCompany() {
      try {
        const res = await selHomeDataCompanyApi();
        if (res.code === 1) {
          this.enterpriseList = res.data;
        }
      } catch (error) {
        console.error("获取企业活跃度数据失败:", error);
      } finally {
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);
      this.updateChart();
    },
    // 职位管理
    positionManage() {
      this.$router.push({
        name: "positionManage",
      });
    },
    // 全部简历
    allResume() {
      this.$router.push({
        name: "allResume",
      });
    },
    // 套餐配置
    setMenuConfig() {
      this.$router.push({
        name: "setMenuConfig",
      });
    },
    // 公众号营销
    officialAccount() {
      this.$router.push({
        name: "officialAccount",
      });
    },
    // 广告管理
    adManage() {
      this.$router.push({
        name: "adManage",
      });
    },
    updateChart() {
      const option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["注册企业", "新增职位", "注册个人", "新增简历"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // data: [
          //   "11/13",
          //   "11/14",
          //   "11/15",
          //   "11/16",
          //   "11/17",
          //   "11/18",
          //   "11/19",
          //   "11/20",
          // ],
          data: this.hireList,
        },
        yAxis: {
          type: "value",
          max: 70,
        },
        series: [
          {
            name: "注册企业",
            type: "line",
            // data: [0.1, 0.2, 1, 0.5, 0.1, 1.8, 2, 0],
            data: this.regTrend[1],
            smooth: true,
            lineStyle: { color: "#409EFF" },
            itemStyle: { color: "#409EFF" },
          },
          {
            name: "新增职位",
            type: "line",
            // data: [1, 0.2, 0, 0, 0.1, 3.8, 4, 1],
            data: this.regTrend[2],
            smooth: true,
            lineStyle: { color: "#F56C6C" },
            itemStyle: { color: "#F56C6C" },
          },
          {
            name: "注册个人",
            type: "line",
            // data: [2, 6.8, 6.2, 0.1, 3.8, 4.5, 2, 0.2],
            data: this.regTrend[3],
            smooth: true,
            lineStyle: { color: "#67C23A" },
            itemStyle: { color: "#67C23A" },
          },
          {
            name: "新增简历",
            type: "line",
            // data: [2, 5, 5, 1, 3.8, 4, 2, 0.1],
            data: this.regTrend[4],
            smooth: true,
            lineStyle: { color: "#E6A23C" },
            itemStyle: { color: "#E6A23C" },
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
  watch: {
    timeRange(newVal) {
      if (newVal === "custom") return;
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * parseInt(newVal));
      this.dateRange = [start, end];
    },
    activeTab(newVal) {
      if (newVal === "personal") {
        this.selHomeDataPersonal();
      } else if (newVal === "register") {
        this.selHomeDataAdd();
      } else if (newVal === "enterprise") {
        this.selHomeDataCompany();
      }
    },
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
};
</script>

<style lang="scss" scoped>
.topBox {
  background: #fff;
  padding: 13px 11px;
  border-radius: 3px;
  position: relative;
  .icon {
    display: block;
    position: absolute;
    top: 27px;
    right: 0;
    width: 110px;
    height: 20px;
  }
  .topBox1 {
    font-size: 14px;
    color: #55585c;
    margin-bottom: 14px;
  }
  .topBox2 {
    font-size: 18px;
    color: #adadad;
    .label_small {
      color: #55585c;
      font-size: 14px;
      margin-left: 10px;
      font-weight: 400;
    }
  }
  .topBox3 {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f5f7f9;
    padding-top: 15px;
  }
}

.shortcutMenu {
  padding-top: 20px;
  width: 100%;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 20px;
  .shortcutMenuItem {
    width: 14.2%;
    cursor: pointer;
    .icon {
      display: block;
      margin: 0 auto 13px;
      width: 35px;
      height: 35px;
    }
    .text {
      display: block;
      text-align: center;
      font-size: 14px;
      color: #474747;
    }
  }
}

.refresh {
  float: right;
  font-size: 13px;
  color: #a4a4a4;
  font-weight: 400;
  .refreshBtn {
    color: #1d82ff;
    background: url()
      0 no-repeat;
    background-size: 15px 15px;
    padding-left: 17px;
    margin-left: 10px;
    cursor: pointer;
  }
}

.today-info {
  padding: 20px;
  cursor: pointer;
  .tit1 {
    font-size: 14px;
    color: #474747;
  }
  .num {
    font-size: 24px;
    color: #232323;
    margin-top: 6px;
    margin-bottom: 10px;
    font-weight: 700;
  }
  .tit2 {
    font-size: 13px;
    color: #474747;
    margin-top: 6px;
  }
}

.today-info:hover {
  border-left: 5px solid #517bff;
  background-color: #fafcff;
  padding-left: 10px;
}

.dashboard-container {
  padding: 20px;
  background-color: #fff;
}

.filter-container {
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

.date-picker {
  margin-left: auto;
}

.chart-container {
  height: 400px;
  margin-top: 20px;
}

.pending_data_lists {
  position: relative;
  .leftOrRight {
    position: absolute;
    top: -55px;
    right: 0;
    padding-top: 20px;
    .el_lf {
      margin-right: 10px;
      display: inline-block;
      width: 16px;
      right: 16px;
      cursor: pointer;
    }
  }
  .pending_data_item {
    width: calc(50% - 7px);
    // width: 120px;
    background: #f9fcff;
    padding: 15px 14px 15px;
    border-radius: 3px;
    box-sizing: border-box;
    margin-bottom: 13px;
    cursor: pointer;
    float: left;
    .title {
      display: flex;
      align-items: center;
      justify-content: start;
      font-size: 12px;
      color: #55585c;
      margin-bottom: 15px;
      .rtIcon {
        display: inline-block;
        width: 5px;
        height: 10px;
        margin-left: 5px;
      }
    }
    .num {
      color: #ff8247;
      font-size: 18px;
    }
  }
}

.pending_data_items {
  width: calc(25% - 14px);
  background: #f9fcff;
  padding: 15px 14px 15px;
  border-radius: 3px;
  box-sizing: border-box;
  margin-bottom: 13px;
  cursor: pointer;
  float: left;
  margin-right: 14px;
  .titles {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: start;
    color: #55585c;
    margin-bottom: 15px;
    .rtIcon {
      display: inline-block;
      width: 5px;
      height: 10px;
      margin-left: 5px;
    }
  }
  .num {
    color: #ff8247;
    font-size: 18px;
  }
}

.pending_data_items:hover {
  border-left: 5px solid #517bff; /* 鼠标悬停时左侧出现蓝色边框 */
  padding-left: 10px; /* 调整内边距以避免文本被边框覆盖 */
}

.headerTitle {
  color: #2c2c2c;
  font-weight: 700;
}
</style>
